<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录-史上最简单的SpringSecurity教程</title>
    <link type="text/css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}" href="../static/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" th:href="@{/css/font-awesome.min.css}" href="../static/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" th:href="@{/css/login.css}" href="../static/css/login.css">
</head>
<body>
    <div class="text-center">
        <div class="container">
            <div class="login-content">
                <div class="login-logo">
                    <h1>统一认证授权中心</h1>
                </div>
                <div class="login-form">
                    <div class="tab-pane active">
                        <form th:action="@{/login}" method="post" th:method="post" class="mt-1" onsubmit="return false;">
                            <div class="form-group">
                                <input type="text" class="form-control" name="username" placeholder="用户名"/>
                            </div>
                            <div class="form-group">
                                <input type="password" class="form-control" name="password" placeholder="密码"/>
                            </div>
                            <div class="form-group clearfix">
                                <input type="text" class="form-control code" name="code" placeholder="验证码"/>
                                <img th:src="@{/commons/code}" id="code" onclick="refresh();" alt=""/>
                            </div>
                            <div class="checkbox">
                                <label><input type="checkbox" name="remember-me"/> 记住我</label>
                            </div>
                            <button type="submit" class="btn btn-primary btn-block mb-1 mt-1" onclick="login()">登录</button>
                            <p class="text-muted text-center"> <a href="login.html#">
                                <small>忘记密码了？</small></a> | <a href="#">注册一个新账号</a>
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" th:src="@{/js/jquery-2.1.4.min.js}" src="../static/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}" src="../static/js/bootstrap.min.js"></script>
<script type="text/javascript" th:inline="javascript">
    /*const contextPath = [[${#request.contextPath}]];
    $("#captcha_link").click(function () {
        $(this).children("img").eq(0).attr("src", contextPath + "/captcha/generate?t=" + Math.random());
        // $("#captcha_img").attr("src", contextPath + "/captcha/generate?t=" + Math.random());
    });*/
</script>
<!-- “点击验证码图片，自动刷新” 脚本 -->
<script>
    function refresh() {
        document.getElementById("code").src =
            "/commons/code?time" + new Date().getTime();
    }

    function login(){
        $.ajax({
            async: false,
            type: "POST",
            dataType: "json",
            url: '/login',
            contentType: "application/json",
            data: JSON.stringify({
                "username": $("input[name='username']").val(),
                "password": $("input[name='password']").val(),
                "code": $("input[name='code']").val(),
                "remember-me": $("input[name='rememberMe']").val()
            }),
            success: function (result) {
                console.log(result)
                if (result.code === 200) {
                    alert("登陆成功");
                    window.location.href = "/index.html";
                } else {
                    alert(result.message)
                }
            }
        });
    }
</script>
</html>